<template>
	<view class="common-container app-container index-container padding">
		<view class="status_bar"> </view>
		<u-navbar title="应用">
			<view class="u-nav-slot" slot="left">
			</view>
			<view class="u-nav-slot" slot="right">
				<uni-icons type="scan" size="26" @tap="handleScan"></uni-icons>
			</view>
		</u-navbar>
		<view class="main-wrap has-navbar-tabbar">
			<u-swiper :list="banners" showTitle keyName="image" height="160px"></u-swiper>
			<view class="function-container">
				<u-empty mode="data" class="empty-container" v-if="menus.length===0" text="暂无可用应用"></u-empty>
				<u-collapse :border="false" :value="functionActiveNames">
					<u-collapse-item :name="menu.id" :border="false" v-for="menu in menus">
						<template #title>
							<view class="group-title">{{menu.name}}</view>
						</template>
						<u-grid :border="false" col="4">
							<u-grid-item v-for="subMenu in menu.children" :key="subMenu.id"
								@click="handleFunctionClick(subMenu)">
								<u--image shape="circle" :showLoading="true" :src="$constants.getFileView(subMenu.icon)"
									width="48px" height="48px"></u--image>
								<text class="function-title">{{subMenu.name}}</text>
							</u-grid-item>
						</u-grid>
					</u-collapse-item>
				</u-collapse>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				banners: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				functionActiveNames: [],
				menus: []
			};
		},
		onLoad() {},
		created() {
			this.userInfo = uni.getStorageSync(this.$constants.USER_INFO)
			this.fetchData()
		},
		methods: {
			fetchData() {
				this.$store.dispatch('getPermission').then(res => {
					console.log(res.h5Perms)
					this.menus = res.h5Menus
					this.functionActiveNames = []
					this.menus.forEach(item => {
						this.functionActiveNames.push(item.id)
					})
				})
			},
			handleScan() {
				var $this = this
				// #ifndef H5
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						this.$store.dispatch('scanLogin', res.result).then((res) => {
							this.$tip.success("扫码登陆成功!")
						}).catch((e) => {
							this.$tip.success(e)
						})
					},
					fail: (e) => {
						this.$tip.success("二维码错误,请重新扫码!")
					}
				})
				// #endif
				// #ifdef H5
				this.$tip.alert("暂不支持")
				// #endif


			},
			handleFunctionClick({
				id,
				name,
				permissionValue
			}) {
				console.log(id, name, permissionValue)
			}

		}
	};
</script>

<style lang="scss" scoped>
	.index-container {
		.function-container {
			margin-top: 15px;

			::v-deep .u-cell__body {
				padding: 10px 0px !important;
			}

			::v-deep .u-collapse-item__content__text {
				padding: 12px 0px !important;
			}

			.group-title {
				font-weight: bold;
				font-size: 15px;
				border-left: 3px solid var(--color-primary);
				padding-left: 5px;
			}

			.function-title {
				font-size: 12px;
				margin-bottom: 10px;
				margin-top: 5px;
			}
		}
	}
</style>